<template>
  <div class="home">
    <van-swipe :autoplay="3000" lazy-render class="swiper">
      <van-swipe-item v-for="image in images" :key="image">
        <van-image width="100%" height="15rem" fit="cover" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" class="tips">
      请输入商家对应编号进入点餐
    </van-notice-bar>
    <van-password-input :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true" />
    <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div v-if="!shopExists" style="color:#fff;">店铺不存在</div>
        <van-loading v-else type="spinner" color="#1989fa" class="block" />
      </div>
    </van-overlay>

    <!-- <div id="container">
      <MapContainer />
    </div> -->
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router';
const request = require('@/network/request').default;
import bus from 'vue3-eventbus'
// import MapContainer from '../components/MapContainer.vue'


export default {
  name: "Home",
  props: [],
  setup(props, context) {
    const images = [
      "https://img.cwiyc.top/WV7QKHpqUoaTMGv.jpg",
      "https://img.cwiyc.top/mQAvUwLo653N7Vc.jpg",
      "https://img.cwiyc.top/jP4ufVLElk91RHo.jpg",
      "https://img.cwiyc.top/Hv5yMTXBY8FC3hp.jpg",
    ];
    const show = ref(false);
    const value = ref('');
    const showKeyboard = ref(false);
    const router = useRouter();
    const shopExists = ref(true)
    bus.emit('routerInfo', { active: router.currentRoute._value.name })
    function goto(sixcode) {
      router.push("/records?code=" + sixcode);
    }
    watch(value, (newValue, oldValue) => {
      if (newValue.length == 6) {
        show.value = true
        localStorage.setItem('shopcode', newValue)
        setTimeout(() => {
          findShop(newValue)
        }, 1000)
      }
    })
    function findShop(sixcode) {
      let shop = {
        ssixcode: sixcode
      }
      request.post('/getshop', shop).then(res => {
        console.log(res)
        if (res.code == -1) {
          shopExists.value = false
          setInterval(() => {
            show.value = false
            shopExists.value = true
          }, 1000);
        } else if (res.code == 0) {
          goto(sixcode)
        }
      })
    }
    return {
      value,
      showKeyboard,
      images,
      show,
      shopExists
    };
  },
}
</script>

<style scoped lang="scss">
.home {
  height: 95vh;
  width: 100%;
  background-color: rgb(240, 236, 236);

  // #container {
  //   width: 100%;
  //   height: 15rem;
  // }
  .tips {
    margin-bottom: 0.6rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    // width: 120px;
    // height: 120px;
    // background-color: #fff;
  }
}
</style>